﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Testing text</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true"></script>
	<script type="text/javascript">

	require(["dojo/ready", "dojo/_base/array", "dojo/dom", "dojo/on", "dojox/gfx","dojox/gfx/matrix"],
	function(ready, array, dom, on, gfx, matrix){

		var ROTATION = 30, surface = null, t1, t2, t3, t4, t5, t6, t7, t8, t9;

		function placeBBox(surface, shape){
			var bbox = shape.getBoundingBox();
			var t = shape.getTransform();//shape._getRealMatrix();
			var tbbox = matrix.multiplyRectangle(t, bbox);
			var rect = surface.createRect(tbbox).setStroke("red");
		}

		function placeAnchor(surface, x, y){
			surface.createLine({x1: x - 2, y1: y, x2: x + 2, y2: y}).setStroke("blue");
			surface.createLine({x1: x, y1: y - 2, x2: x, y2: y + 2}).setStroke("blue");
		}

		function makeText(surface, text, font, fill, stroke){
			var t = surface.createText(text);
			if(font)   t.setFont(font);
			if(fill)   t.setFill(fill);
			if(stroke) t.setStroke(stroke);
			placeAnchor(surface, text.x, text.y);
			return t;
		}

		function makeShapes(){
			var m = matrix;
			surface.createLine({x1: 250, y1: 0, x2: 250, y2: 500}).setStroke("green");
			t1 = makeText(surface, {x: 250, y: 50, text: "Start", align: "start"},
				{family: "Times", size: "36pt", weight: "bold"}, "black", "red")
				.setTransform(m.rotategAt(ROTATION, 250, 50));
			t2 = makeText(surface, {x: 250, y: 100, text: "Middle", align: "middle"},
				{family: "Symbol", size: "24pt"}, "red", "black")
				.setTransform(m.rotategAt(ROTATION, 250, 100));
			t3 = makeText(surface, {x: 250, y: 150, text: "End", align: "end"},
				{family: "Helvetica", style: "italic", size: "18pt", rotated: true}, "#FF8000")
				.setTransform(m.rotategAt(ROTATION, 250, 150));
			t4 = makeText(surface, {x: 250, y: 200, text: "Define Shuffle Tiff", align: "middle", kerning: true},
				{family: "serif", size: "36pt"}, "black")
				.setTransform(m.rotategAt(0, 250, 200));
			t5 = makeText(surface, {x: 250, y: 250, text: "Define Shuffle Tiff", align: "middle", kerning: false},
				{family: "serif", size: "36pt"}, "black")
				.setTransform(m.rotategAt(0, 250, 250));
			// test #14522
			t6 = makeText(surface, {x: 250, y: 290, text: 18, align: "start"},
				{family: "sans serif", size: "18pt", weight: "bold"}, "black");
			// test #16099
			t7 = makeText(surface, {x: 0, y: 0, text: "Middle", align: "middle"},
				{family: "sans serif", size: "24pt"}, "red", "black")
				.setTransform(m.translate(250, 340));
			t8 = makeText(surface, {x: 250, y: 390, text: "Number: \u200E\u202A20\u202C", align: "middle"},
					{family: "sans serif", size: "24pt"}, "red", "black");
			// a text with some descents
			t9 = makeText(surface, {x: 0, y: 0, text: "go, Dojo! go", align: "end"},
					{family: "serif", size: "36pt"}, "red", "black")
					.setTransform(m.translate(250, 440));


			array.forEach(["t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9"], function(name){
				var node = eval("(" + name + ")");
				placeBBox(surface, node);
			});
		}

		function createSurface(nodeId){
			surface = gfx.createSurface(nodeId, 500, 500);
			surface.whenLoaded(makeShapes);
		}

		function getSizes(){
			if (!surface.children.length){return;}
			var t = [];
			array.forEach(["t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9"], function(name){
				var node = eval("(" + name + ")");
				t.push(node.getShape().text + " = " + node.getTextWidth());
			});
			dom.byId("sizes").innerHTML = t.join("<br/>");
		}

		ready(function(){
			on(dom.byId("getSizes"), "click", getSizes);
			on(dom.byId("clear"), "click", function(){surface.clear();});
			createSurface("test");
		});
	});
</script>
</head>
<body>
	<h1>dojox.gfx Text test</h1>
	<div id="test" style="width: 500px; height: 500px;"></div>
	<div><button id="clear">Clear</button>&nbsp;<button id="getSizes">Get sizes</button></div>
	<p id="sizes">&nbsp;</p>
	<p>That's all Folks!</p>
</body>
</html>
